<script setup>
const introData = [
  {
    id: 1,
    title: 'Scratch图形编程',
    imgUrl: new URL('@/assets/course/programming_class1.webp', import.meta.url)
      .href,
    description:
      'Scratch是魔法盒子，用色彩缤纷的积木块，让孩子轻松学编程，创造动画、游戏，开启智慧的大门，乐趣无穷！'
  },
  {
    id: 2,
    title: 'Python程序设计',
    imgUrl: new URL('@/assets/course/programming_class2.webp', import.meta.url)
      .href,
    description:
      'Python，编程界的乐高，简单易懂，让孩子轻松搭建代码世界，探索科技奥秘，释放无限创意！'
  },
  {
    id: 3,
    title: 'C++算法竞赛',
    imgUrl: new URL('@/assets/course/programming_class3.webp', import.meta.url)
      .href,
    description:
      'C++，编程界的瑞士军刀，严谨高效，让孩子掌握算法精髓，挑战编程巅峰，成为编程高手！'
  }
]
</script>

<template>
  <div class="introduction">
    <div class="title">
      <div class="titlt_img"><span>课程介绍</span></div>
      <span class="description">依据孩子的学习曲线来设计不同的课程类型</span>
    </div>
    <el-row class="wrapper">
      <el-col
        :span="8"
        class="el-col_item"
        v-for="item in introData"
        :key="item.id"
      >
        <el-card>
          <div class="card_content">
            <img :src="item.imgUrl" alt="" style="width: 310px; height: auto" />
            <div class="item_title">{{ item.title }}</div>
            <div class="description">{{ item.description }}</div>
            <button class="btn">了解更多</button>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<style lang="scss" scoped>
.introduction {
  padding-top: 100px;
  padding-bottom: 230px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-image: url('@/assets/course/introduction_bg.jpg');
  .title {
    width: 397px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    animation: auto ease 0s 1 normal none running none;
    .titlt_img {
      position: relative;
      width: 300px;
      height: 30px;
      background: url('@/assets/course/titlelogo.webp') no-repeat center/contain;
      span {
        position: absolute;
        font-weight: bold;
        font-size: 36px;
        left: 52%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
    }
    .description {
      margin-top: 20px;
      font-size: 14px;
      color: rgb(178, 178, 178);
      line-height: 48px;
    }
  }
  .wrapper {
    width: 100%;
    .el-col_item {
      display: flex;
      align-items: center;
      justify-content: center;
      .card_content {
        max-width: 310px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .item_title {
          margin: 20px 0;
          font-size: 18px;
          text-align: center;
        }
        .description {
          height: 60px;
          font-size: 14px;
          color: rgb(178, 178, 178);
          overflow: hidden;
        }
        .btn {
          margin: 20px 0 20px 0;
          width: 200px;
          height: 40px;
          border-radius: 20px;
          border: none;
          background-color: #2e69ff;
          font-size: 14px;
          color: #ffffff;
          cursor: pointer;
          &:hover {
            background-color: #f7e7b1;
            color: #000;
          }
        }
      }
    }
  }
}
</style>
